<?php
/**
 * 导入功能
 * User: apple
 * Date: 1/23/22
 * Time: 9:54 PM
 */

/* @var $this yii\web\View */
/* @var $_params_ array 总参数变量 */
/* @var $column string 文件上传接收变量字段名 */
/* @var $isShow bool 是否展示弹出层 */
/* @var $scenario string 场景 */
/* @var $importUrl string 导入URL */
/* @var $endCallback string 结束执行方法 */

// 是否展示弹出层
if (!isset($isShow)) $isShow = 'false';

// URL为空默认
if (empty($importUrl)) $importUrl = '';

// HTML
$template = <<<EOL

    <el-dialog title="导入数据" :visible.sync="showDialog" :lock-scroll="true" modal-append-to-body
        class="dialog-mini clear-wrapper import-wrapper" :close-on-click-modal="false" :before-close="closeDialog">
        <div element-loading-spinner=" " :element-loading-text="importingTxt" v-loading.lock="importing">
EOL;

$template .= $this->render('../common/uploader.php', [
    'column'       => 'column',
    'scenario'     => 'scenario',
    'wrapperClass' => 'text-center',
    'uploadUrlKey' => 'uploadExcel',
    'fileTypes'    => ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
    'status'       => 'uploaderStatus'
]);

$template .= <<<EOL
    </div>
    <div slot="footer">
        <el-button type="danger" size="mini" @click="closeDialog()">关闭</el-button>
        <el-button size="mini" type="primary" @click="submit()" :loading="uploaderStatus == 'uploading'">
            提交
        </el-button>
    </div>
</el-dialog>

EOL;

$js = <<<EOL
Vue.component('import', {
    template: `$template`,
    props: {
        /**
         * 是否展示弹出层
         */
        showDialog: {
            type: Boolean,
            default: false
        },
        /**
         * 场景
         */
        scenario: {
            type: String,
            default: ""
        },
        /**
         * 导入连接
         */
        importUrl: {
            type: String,
            default: ""
        },
        /**
         * 导入结束执行方法
         */
        endCallback: {
            type: Function,
            default: function() {}
        },
    },
    data: function () {
        return {
            uploaderStatus: '', // 上传组件状态
            importing: false, // 正在导入
            importingTxt: '', // 正在导入文本
            column: '/upload/office/2022-07-12/office_T_1657601320_T_856486be.xlsx'          // 最终上传文件地址
        };
    },
    created: function () {

        var that = this;
        this.\$nextTick(function () {});
    },
    methods: {
        /**
         * 提交导入
         * @returns {*|void}
         */
        submit: function (\$page, \$maxPage) {

            \$page = parseInt(\$page || 1);
            // 上传中...应对按钮状态
            this.uploaderStatus = 'uploading';
            // 正在加载...
            this.importingTxt = '正在导入第' + \$page + '页' + (!\$maxPage ? '...' : '共' + \$maxPage + '页...');
            this.importing = true;

            // 连接
            if (!this.importUrl) return that.\$message({
                type: 'error',
                showClose: true,
                message: '请联系管理员，设置导入连接',
                customClass: 'import z-index-top',
            });

            var that = this;

            // 获取各模块的值
            \$w.request({
                url: this.importUrl,
                type: 'POST',
                data: {file_path: this.column, page: \$page},
                dataType: 'json',
                beforeCallback: function () {
                    setTimeout(function () {
                        // 隐藏正在加载
                        that.importing = false;
                    }, 1500);
                },
                callback: function (event) {

                    // 必须先登录
                    if (parseInt(event.no) === 401) {
    
                        that.\$message({
                            type: 'warning',
                            showClose: true,
                            message: '登录超时，请重新登录',
                            customClass: 'import z-index-top',
                        });
    
                        // 几秒之后移除
                        return setTimeout(function () {
                            window.parent.location.href = \$w.getPageUrl('login');
                        }, 810);
                    }
    
                    // 操作失败显示错误信息
                    if (parseInt(event.no) !== 200) {
    
                        // 按钮状态还原
                        that.uploaderStatus = '';
                        // 失败文本
                        return that.\$message({
                            type: 'error',
                            showClose: true,
                            message: '第'+\$page+'页导入失败',
                            customClass: 'import z-index-top',
                        });
                    }
                    // 执行下一页
                    if (parseInt(event.data.next_have) === 1) {
                        setTimeout(function () {
                            return that.submit(\$page + 1, event.data.total_page);
                        }, 1500);
                    } else {
                        // 按钮状态还原
                        that.uploaderStatus = '';
                        // 隐藏弹出层
                        that.showDialog = false;
                        that.\$emit('update:showDialog', false);
                        // 结束执行方法
                        that.endCallback();
                        return that.\$message({
                            type: 'success',
                            showClose: true,
                            message: '导入完毕',
                            customClass: 'import z-index-top',
                        });
                    }
                }
            });
        },
        /**
         * 关闭弹出层
         */
        closeDialog: function (\$done) {
            // 正在操作中...无法关闭
            if (this.importing) return this.\$message({
                type: 'error',
                showClose: true,
                message: '正在导入中，无法关闭',
                customClass: 'import z-index-top',
            });
            // 隐藏弹出层
            this.showDialog = false;
            if (typeof list === 'function') \$done();
            // 提交关闭
            this.\$emit('update:showDialog', false);
        }
    },
    watch: {}
});
EOL;

if (empty($this->params['reg_import'])) $this->registerCss("
    .import-wrapper.dialog-mini .el-dialog{width: 400px}
    .import.z-index-top {z-index: 1999995 !important}
    .import.z-index-second {z-index: 1999994 !important}
");
if (empty($this->params['reg_import'])) $this->registerJs($js);
// 已注册过
$this->params['reg_import'] = true;

echo "<import ref=\"import\" :show-dialog.sync='$isShow' :import-url='$importUrl' :scenario='$scenario'
        @end-callback='$endCallback'></import>\n";
?>
